<template>
  <div class="login">
      <van-nav-bar
        title="登录"
      />
      <van-cell-group>
        <van-field
          required
          :error-message="mobile_message"
          v-model.trim="mobile"
          type="tel"
          label="手机号 "
          placeholder="请输入手机号"/>
      </van-cell-group>
      <van-cell-group>
        <van-field
          required
          :error-message="code_message"
          v-model.trim="code"
          type="password"
          label="密码"
          placeholder="请输入密码" />
      </van-cell-group>
      <div class="btn-wrap">
        <van-button  @click="hLogin" class="btn" type="info">登录</van-button>
      </div>
   </div>
</template>
<script>
import { login, getProfile, getInfo } from '@/api/user'
export default {
  name: 'Login',
  data () {
    return {
      mobile: 13912345678,
      code: 246810,
      mobile_message: '',
      code_message: ''
    }
  },
  methods: {
    // 登录表单验证
    check () {
      if (this.mobile === '') {
        this.mobile_message = '手机号错误'
        return false
      } else {
        this.mobile_message = ''
      }
      if (this.code === '') {
        this.code_message = '验证码错误'
        return false
      } else {
        this.code_message = ''
      }
      return true
    },
    async hLogin () {
      // 1.校验
      if (!this.check()) {
        alert('验证不通过')
        return
      }
      // 提示登陆中
      this.$toast.loading({
        duration: 0, // 永远不会关闭
        mask: true,
        message: '登陆中....'
      });
      // 2.发请求
      try {
        const result = await login(this.mobile, this.code)
        console.log(result)
        // 1.保存token到vuex中(所有的组件都可以访问这个数据)
        // 在组件中如何去调用mutation?(1) mapMutations,(2)$store.commit
        this.$store.commit('mSetTokenInfo', result.data.data)
        // 2. 再发请求获取个人信息
        const res = await getInfo()
        console.log(res)
        const user = res.data.data
        // 保存到vuex
        this.$store.commit('mSetUserInfo', {
          id: user.id,
          name: user.name,
          photo: user.photo
        })

        // 覆盖上一个toast提示
        this.$toast.success('登陆成功')
        // 登录跳转
        // this.$router.push('/')
        // 路由守卫
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
      } catch (err) {
        console.log(err)
        this.$toast.fail('登录失败')
      }
      // 3.根据请求结果，做下一步处理（成功 + 失败）
      getProfile()
    }
  }
}
</script>

<style lang="less" scoped>
.login {
    .btn-wrap {
        padding: 20px;
        .btn {
          width: 100%;
          background-color: #3196af;
          color: #fff;
        }
    }
}
</style>
